<template>
  <div>
    <el-dialog
      title="添加药品"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form :model="form"  :rules="rules">
         <el-form-item label="药品编码" :label-width="formLabelWidth" prop="code">
          <el-input v-model="form.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="药品名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
          <el-form-item label="药品数量" :label-width="formLabelWidth" prop="count">
          <el-input v-model="form.count" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位" :label-width="formLabelWidth" prop="type">
      <el-select v-model="form.type" placeholder="请选择单位">
         <el-option label="请选择" value=""></el-option>
            <el-option
              v-for="item in type"
              :key="item.value"
              :value="item.value"
            ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="药品单价" :label-width="formLabelWidth" prop="price">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDrugFun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import EventBus from "../../../utils/eventBus";

export default {
  data() {
    return {
          type: [
        { text: "瓶", value: "瓶" },
        { text: "粒", value: "粒" },
        { text: "盒", value: "盒" },
      ],
      dialogVisible: false,
       form: {
          name: '',
          code:'',
          count:'',
          type: '',
          price:'',
        },
        rules: {
        type: [
          { required: true, message: "请选择收支类型", trigger: "change" },
        ],
        code: [{ required: true, message: "请输入药品编码", trigger: "blur" }],
        name: [{ required: true, message: "请输入药品名称", trigger: "blur" }],
        count: [{ required: true, message: "请输入药品数量", trigger: "blur" }],
        price: [{ required: true, message: "请输入单价", trigger: "blur" }],

      },
        formLabelWidth: '120px'
    };
  },
  mounted() {
    EventBus.$on("DialogIsShow", this.DialogIsShowFun);
  },
  methods: {
    DialogIsShowFun() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    addDrugFun(){
        this.dialogVisible = false;
        this.$emit('addDrugFunction',this.form)
    }
  },
};
</script>

<style lang="less" scoped>
.el-input__inner{
    width: 150px;
}
</style>